<html>
    <head>
        <title>H5开发注意</title>
    </head>
    <body>
        <script>
              /*
                        八、H5开发注意

                                    1、H5发布到服务器注意：

                                            ①、配置发行后的路径 (发行在网站根目录可不配置)，比如发行网站路径是 wwww.xx.com/html5,在 manifest.json 文件内编辑h5节点，router 下增加 base属性为　html5 

                                                eg:  "h5":{
                                                        "router":{
                                                            "base":"/html5/"
                                                        }
                                                     }

                                                     示例图片:

                                                     https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/html5-a.png

                                            
                                            ②、点击菜单   "发行" -> "H5"

                                            ③、在当前目录下的 unpackage/dist/build/web 目录下找出的资源，部署服务器(或者使用本地服务器预览)，如需部署到相对路径(Vue2项目支持本地 file协议打开)

                                                     参考：https://ask.dcloud.net.cn/article/37432。 
                                                     
                                            ④、 从 HBuilderX 4.06 开始，为了统一概念，编译目录从 h5 调整为 web，开发者的 CI/CD 流程需要同步进行更新。   


                                    2、引用第三方 js 的方式

                                            ①、通过 npm 引入  (通过条件编译，只有是 h5 平台才 import 相应的库)

                                            ②、在 manifest 文件编辑 h5 节点的 template 属性，填写 html 模板路径，在html模板里可以使用script的方式引入三方的js，如下示例是加了百度统计的html模板部分代码，

                                               模板全部代码可参考：  自定义模板 https://zh.uniapp.dcloud.io/collocation/manifest.html#h5-template

                                               eg：

                                                        <body>
                                                                    <noscript>
                                                                        <strong>Please enable JavaScript to continue.</strong>
                                                                    </noscript>
                                                                    <div id="app"></div>
                                                                    <-- built files will be auto injected
                                                                    <script>
                                                                        var _hmt = _hmt || [];
                                                                        (function() {
                                                                            var hm = document.createElement("script");
                                                                            hm.src = "https://hm.baidu.com/hm.js?xxxxxx";
                                                                            var s = document.getElementsByTagName("script")[0];
                                                                            s.parentNode.insertBefore(hm, s);
                                                                        })();
                                                                    <//script>
                                                        </\body>


                                    3、H5版 uni-app 全支持 vue 语法，所以可能造成部分写法在H5端生效，在小程序或App端不生效。


                                    4、H5 校验了更严格的 vue语法，有些洗发不规范会报警，比如：  data 后面写对象会报警，必须写function;

                                          不能膝盖 props 的值；  组件最外层template 节点下不允许包含多个节点等。

                                    
                                    5、编译为H5后生成的是单页应用 (SPA)


                                    6、如果遇到跨域造成js无法联网，注意网络请求 (request、uploadFile、dowonloadFile等)在浏览器存在跨域限制，

                                         解决方案有详见： https://ask.dcloud.net.cn/article/35267


                                    7、App 和 小程序 的 tabbar 均是原生控件，元素区域坐标是不好喊原生导航栏和 tabbar的; 
                                    
                                         而H5里导航栏和 tabbar 是 div 模拟出来的，所以元素坐标会包含导航栏和 tabbar 的高度。

                                         为了优雅的解决多端高度定位问题，uni-app 新增了2个css变量  --window-top  和  --window-bottom,

                                         这里代表了页面的内容区域距离顶部和底部的距离。  举个例子，如果你想在原生 tabbar 上方陷入一个菜单，之前写 bottom:0。 

                                         这样的写法编译到 h5后，这个菜单会和 tabbar 重叠，位于屏幕底部。

                                         而改为使用 bottom: var(--window-bottom),则不管在 app 下还是在h5下，这个菜单都是悬浮在 tabbar 上方的。

                                         这就避免了写条件编译代码。当然仍然可以使用 H5 的条件编译处理界面的不同。


                                    8、CSS内使用　vh 单位的时候注意 100vh 包含导航栏，使用时需要减去导航栏和 tabbar 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。


                                    9、正常支持 rpx, px是物理像素。 暂不支持通过设置 manifest.json 的 "transformPx":true，来把 px 当动态单位使用。


                                    10、使用罗盘、地理位置、加速计等相关接口需要使用 https 协议，本地预览(localhost)可以使用 http 协议。


                                    11、PC 端 Chrome 浏览器模拟设备测试的时候，获取位置API需要连接谷歌服务器。


                                    12、vue2 组件内(页面除外) 不支持 onLoad、onShow 等页面生命周期， vue3 请使用组合式 api 监听。


                                    13、为了避免与uni-app 内置组件冲突，自定义组件请加上前缀(但不能是u 和 uni )。  比如可使用的自定义组件名称： my-view 、 m-input、 we-icon ,

                                        例如不可使用的自定义组件名称： u-view 、 uni-input ，如果已有项目使用了可能造成冲突的名称，请修改名称，另外微信小程序下自定义组件名称不能以 wx 开头。

                                    
                                    14、vue3 开发阶段不会自动处理语法兼容问题，如果在低版本浏览器上运行，需要自行处理，可参考： https://cn.vitejs.dev/config/build-options#build-target
                                                
                    */
        </script>
    </body>
</html>